<script setup lang="ts">
import Header from '@/views/header/Header.vue'
import Content from '@/views/content/AppContent.vue'
import Sidebar from '@/views/siderbar/Sidebar.vue'
import SystemMessage from '@/components/SystemMessage.vue'
</script>

<template>
  <div class="page">
<!--    <div class="page_left">-->
<!--      <Sidebar />-->
<!--    </div>-->
    <div class="page_right">
      <Header class="page_header" />
      <Content class="page_content" />
    </div>
  </div>
<!--  <SystemMessage />-->
</template>

<style lang="less">
.page {
  display: flex;
  height: 100vh; // 使页面高度为视窗的100%
  width: 100%;
  overflow: hidden;
}

.page_left {
  width: 20%; // 左侧栏宽度为300px
  background-color: rgb(249, 249, 249); // 背景颜色为灰色
  height: 100%; // 高度为100%
}

.page_right {
  display: flex;
  flex-direction: column; // 设置垂直布局
  flex-grow: 1; // 占据剩余空间
  height: 100%; // 高度为100%
  padding: 0;
}

.page_header {
  background-color: rgb(255, 255, 255);
  padding: 15px 10px; // 内边距为10px
}

/*
.page_content {
  //flex-grow: 1; // 占据剩余空间
  //padding: 20px; // 内边距为20px
  //overflow-y: auto; // 超出部分显示滚动条
  background-color: rgb(255, 255, 255);
}
*/


</style>
